<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>09-百度换肤效果</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">

	*{
		margin:0;
		padding:0;
	}

	.skin{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		border:2px solid red;
		background-image:url("images/banner1.jpg");
		background-size: 100% 100%;
		background-position: center 0;
		background-repeat:no-repeat;
		opacity: 0.5
	}
	.skin-photo{
		width: 100%;
		height: 100px;
		position: relative;
		z-index: 10;


	}



	.skin-photo ul{
		overflow: hidden;
		width: 1200px;
		margin:0 auto;
		background-color: rgba(255,255,255,0.6);
	}

	.skin-photo ul li{
		list-style: none;
		float:left;
		height: 120px;
		cursor: pointer;
		margin:10px 0 5px 96px;
	}

	.skin-photo ul li img{
		width: 180px;
		height: 120px;
	}


	



</style>
</head>
<body>
	
	<div class="skin" id="skin"></div>

<div class="skin-photo">
	<ul>
		<li><img src="images/banner1.jpg" alt=""></li>
		<li><img src="images/banner2.jpg" alt=""></li>
		<li><img src="images/banner3.jpg" alt=""></li>
		<li><img src="images/banner4.jpg" alt=""></li>
	</ul>
</div>






<script type="text/javascript">

	/*function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}*/

	var skin = document.getElementById("skin")
	var allItems = document.getElementsByTagName("li")

	for(var i=0; i<allItems.length; i++){
		allItems[i].index = i+1

		allItems[i].onclick= function(){
			allItems[i].style.backgroundImage = "url('images/banner${this.index}.jpg')"
		}
		
	}





</script>


</body>
</html>